<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .baidu li{
    float: left;
    margin: 0 1px;
    list-style: none;
  }
  .baidu img {
    width: 100px;
  }
</style>
<body>
<ul class="baidu">
  <li><img src="../../images/1.jpg"></li>
  <li><img src="../../images/2.jpg"></li>
  <li><img src="../../images/3.jpg"></li>
  <li><img src="../../images/4.jpg"></li>
</ul>
<script>
  var imgs = document.querySelector('ul').querySelectorAll('img');

  for(var i = 0; i < imgs.length; i++){
    imgs[i].onclick = function () {
      document.body.style.backgroundImage = 'url('+ this.src + ')';
    }
  }
</script>
</body>
</html>